<style scored>
.ivu-tabs-nav .ivu-tabs-tab .ivu-icon{
    margin-right: 0;
}

h5{
    margin-bottom: 0;
    font-weight: bold;
    font-size: 14px;
}

.result {
    width: auto;
    height: 100%;
    border: 2px dashed gray;
    min-height: 480px;
    background-color: cornsilk;
    padding: 10px;
}
</style>

<template>
    <div>
        <h4 class="font-weight-bold">风控API：调用风控接口</h4>

        <b-card no-body class="mb-2">
            <b-card-header>接口说明</b-card-header>
            <b-card-body>
                <h6>通过该接口调用平台风控工具，风控工具包装后，按金融产品及风控节点方式调用。具体风控节点映射哪些风控工具，在平台中定义。</h6>
            </b-card-body>
        </b-card>

        <b-card class="mb-4">
            <Row :gutter="32">
                <i-col span="24" class="demo-tabs-style2">
                <Tabs type="card">
                    <TabPane icon="ios-gear" label="传入参数">
                       <div>
                            <Row>                         
                                <i-col span="14">
                                    <h5 class="mb-4">真实数据案例</h5>
                                </i-col>
                            </Row>

                            <Row>
                                <i-col span="8">
                                    
                                </i-col>
                                <i-col span="14">
                                    <div class="result">
                                        <tree-view :data="realData" :options="{maxDepth: 3}"></tree-view>
                                    </div>
                                </i-col>
                            </Row>
                        </div>
                    </TabPane>
                    <TabPane icon="log-out" label="返回结果">
                        <div>
                            <Row>                         
                                <i-col span="14">
                                    <h5 class="mb-4">真实数据案例</h5>
                                </i-col>
                            </Row>

                            <Row>
                                <i-col span="8">
                                    
                                </i-col>
                                <i-col span="14">
                                    <div class="result">
                                        <tree-view :data="outData" :options="{maxDepth: 3}"></tree-view>
                                    </div>
                                </i-col>
                            </Row>
                        </div>
                    </TabPane> 
                    <TabPane icon="android-home" label="调用接口">
                        <Row>
                            <i-col span="12">
                                <Form ref="testInterfaceForm" :model="testInterfaceForm" :rules="formRule" :label-width="100">
                                    <FormItem label="示例：">
                                        <Row>
                                            <i-col span="12">
                                            </i-col>
                                        </Row>
                                    </FormItem>
                                    <FormItem label="风控服务">
                                        <Row>
                                            <i-col span="12">
                                            <Select v-model="testInterfaceForm.riskServiceOid" @on-change="loadRiskServiceNode" >
                                                <Option 
                                                    v-for="riskService in riskServiceList" 
                                                    :value="riskService.oid" 
                                                    :key="riskService.oid">
                                                    {{riskService.name}}
                                                </Option>
                                            </Select>
                                            </i-col>
                                        </Row>
                                    </FormItem>
                                    <FormItem label="风控节点">
                                        <Row>
                                            <i-col span="12">
                                            <Select v-model="testInterfaceForm.riskServiceNodeOid">
                                                <Option 
                                                    v-for="riskServiceNode in riskServiceNodeList" 
                                                    :value="riskServiceNode.oid" 
                                                    :key="riskServiceNode.oid">
                                                    {{riskServiceNode.name}}
                                                </Option>
                                            </Select>
                                            </i-col>
                                        </Row>
                                    </FormItem>
                                    <FormItem label="风控对象类型"  @on-change="loadRiskObjectCustomer()">
                                        <Row>
                                            <i-col span="12">
                                            <Select v-model="testInterfaceForm.riskObjectType">
                                                <Option 
                                                    v-for="riskObject in riskObjectList" 
                                                    :value="riskObject.udcValue" 
                                                    :key="riskObject.udcValue">
                                                    {{riskObject.udcValueDesc}}
                                                </Option>
                                            </Select>
                                            </i-col>
                                        </Row>
                                    </FormItem>
                                    <FormItem label="风控对象" prop="riskObjectOid">
                                        <Row>
                                            <i-col span="12">
                                            <Select v-model="testInterfaceForm.riskObjectOid">
                                                <Option 
                                                    v-for="riskCustomer in riskCustomerList" 
                                                    :value="riskCustomer.oid" 
                                                    :key="riskCustomer.oid">
                                                    {{riskCustomer.customerName}}
                                                </Option>
                                            </Select>
                                            </i-col>
                                        </Row>
                                    </FormItem>
                                    
                                    <FormItem>
                                        <Button type="primary" @click="loadData()">提交</Button>
                                    </FormItem>
                                </Form>
                            </i-col>
                            <i-col span="12">
                                <div class="result">
                                    <tree-view :data="result" :options="{maxDepth: 3}"></tree-view>
                                </div>
                            </i-col>
                        </Row>
                    </TabPane>                   
                </Tabs>
                </i-col>
            </Row>
        </b-card>
    </div>
</template>

<script>
import VJstree from "vue-jstree";

export default {
    name: "OriginConsole",
    data() {
        return {
            data: [],
            oid: null,
            treeData: [],
            realData: [],
            outData:{},
            result: { code: 200 },
            testInterfaceForm: {
                riskObjectOid:0,
                riskServiceNodeOid:0,
                riskObjectType: "customer",
                riskServiceOid:0
            },
            choiseService: null,
            formRule: {
                
            },
            riskServiceList:[],
            riskServiceNodeList:[],
            riskObjectList:[],
            riskCustomerList:[],
            errorInfo:""
        };
    },
    created(){
        this.oid = this.$route.query.oid;
    },
    mounted() {
        this.loadOutDataExample();
        this.loadInterfaceData();
        this.loadRiskService();
        this.loadRiskObject();
    },
    methods: {
        loadInterfaceData(parentOid) {
            let self = this;
            let url = "/static/json/riskTool/api-calltools-in.json";
            let params = {
                dtype: "json",
                exactlyMatch: "true",
                keyWord: "深圳市一体医疗科技有限公司",
                pageIndex: 1,
                pageSize: 10,
                province: ""
            };
            self.$http.get(url, params).then(res => {
                // console.log(res);
                self.realData = res;
            });
        },
        loadOutDataExample(parentOid) {
            let self = this;
            let url = "/static/json/riskTool/api-calltools-out.json";
            let params = {
                dtype: "json",
                exactlyMatch: "true",
                keyWord: "深圳市一体医疗科技有限公司",
                pageIndex: 1,
                pageSize: 10,
                province: ""
            };
            self.$http.get(url, params).then(res => {
                // console.log(res);
                self.outData = res;
            });
        },
        loadRiskService(){
            let self = this;
            self.$http.get('/app/v1/riskServices?pageSize=100').then(function(resp){
                self.riskServiceList = resp.data.data;
            });
        },
        // 切换金融服务
        loadRiskServiceNode(item){
            let self = this;
            let riskServiceOid = self.testInterfaceForm.riskServiceOid;

            // 赋值当前选择的金融服务
            self.riskServiceList.forEach(function(item){
                if(item.oid === riskServiceOid){
                    self.choiseService = item;
                }
            })
            
            if(self.choiseService){
                // 加载风控节点
                self.$http.get('/app/v1/riskServices/'+riskServiceOid+'/riskNodes?pageSize=100').then(function(resp){
                    self.riskServiceNodeList = resp.data.data;
                });
                // 加载客户列表
                self.loadRiskObjectCustomer();
            }
        },
        loadRiskObject(){
            let self = this;
            self.$http.get('/app/v1/udc/langs/zh_CN/udcCodes/RISK_OBJECT').then(function(resp){
                self.riskObjectList = resp.data;
            });
        },
        loadRiskObjectCustomer(){
            let self = this;
            let riskServiceCode = self.choiseService.code;
            let riskServiceOid = self.choiseService.oid;
            let riskObjectType = self.testInterfaceForm.riskObjectType;
            if(riskServiceOid > 0 && riskObjectType == 'customer'){
                self.$http.get('/app/v1/customers?pageSize=100&serviceCode='+riskServiceCode).then(function(resp){
                    self.riskCustomerList = resp.data.data;
                });
            }
        },
        loadData: function() {
            let vm = this;
            if(vm.testInterfaceForm.riskObjectOid == 0){
                alert("请选择风控服务");
                return false;
            }
            if(vm.testInterfaceForm.riskServiceNodeOid == 0){
                alert("请选择风控节点");
                return false;
            }
            if(vm.testInterfaceForm.riskObjectType.trim() == ''){
                alert("请选择风控对象");
                return false;
            }
            if(vm.testInterfaceForm.riskObjectOid == ''){
                alert("请输入对象主键");
                return false;
            }
            vm.$http.post(
                "/app/v1/call/riskToolExecution",
                this.testInterfaceForm
            )
            .then(
                function(res) {
                    let resp = res.data; // HTTP响应数据
                    let status = res.status; // HTTP响应状态
                    // console.log(res);
                    vm.result = res;
                },
                function(err) {}
            )
            .catch(function(err) {});
        }
    },
    beforMount(){
        // console.log('Console',this.oid);
        this.oid = this.$route.query.oid;
    }
};
</script>

